<template>
  <div class="mod-sys__role">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <el-form-item>
        <el-input v-model="state.dataForm.cid" placeholder="ID" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="state.dataForm.ccompanyName" placeholder="请输入公司名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="state.dataForm.cmobile" placeholder="请输入完整手机号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="state.dataForm.cprocessState" placeholder="请选择数据处理状态" clearable>
          <el-option v-for="item in [
            { value: '0', label: '未处理' },
            { value: '1', label: '已处理' },
          ]" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="state.dataForm.cconnected" placeholder="请选择沟通结果" clearable>
          <el-option v-for="item in [
            { value: '0', label: '未接通' },
            { value: '1', label: '已接通' },
            { value: '2', label: '无效' },
          ]" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="state.dataForm.cmobileStatus" placeholder="请选择电话状态" clearable>
          <el-option v-for="item in [
            { value: 'NORMAL', label: '正常' },
            { value: 'SHUTDOWN', label: '停机' },
            { value: 'POWER_OFF', label: '关机' },
            { value: 'SUSPECTED_POWER_OFF', label: '疑似关机' },
            { value: 'BUSY', label: '忙' },
            { value: 'UNKNOWN', label: '未知' },
            { value: 'NOT_EXIST', label: '空号' }
          ]" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="state.dataForm.cbelongerName" placeholder="请输入归属人" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="state.dataForm.cuserName" placeholder="请输入操作人" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <!-- 0待处理  1待调用企业验证企业名称接口  2待调用详情接口  3处理完成 -->
        <el-select v-model="state.dataForm.cisDemand" placeholder="是否有采购意向" clearable>
          <el-option v-for="item in [
            { value: '0', label: '无' },
            { value: '1', label: '有' },
          ]" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="state.dataForm.cdemand" placeholder="请输入采购意向" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="state.daterange" type="daterange" value-format="YYYY-MM-DD" :range-separator="$t('datePicker.range')" :start-placeholder="$t('datePicker.start')" :end-placeholder="$t('datePicker.end')"> </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="state.getDataList()">{{ $t("query") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetQuery()">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" @sort-change="state.dataListSortChangeHandle" style="width: 100%">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="id" label="ID" header-align="center" align="center" width="70"></el-table-column>
      <el-table-column prop="name" label="姓名" header-align="center" align="center" width="120"></el-table-column>
      <el-table-column prop="companyName" label="公司名称" header-align="center" align="center" min-width="150"></el-table-column>
      <el-table-column prop="mobile" label="联系电话" header-align="center" align="center" width="120"></el-table-column>
      <el-table-column prop="mobileStatus" label="电话状态" header-align="center" align="center" width="120">
        <template v-slot="scope">
          <el-tag v-if="scope.row.mobileStatus == 'NORMAL'" type="success">正常</el-tag>
          <el-tag v-else-if="scope.row.mobileStatus == 'SHUTDOWN'" type="info">停机</el-tag>
          <el-tag v-else-if="scope.row.mobileStatus == 'POWER_OFF'" type="info">关机</el-tag>
          <el-tag v-else-if="scope.row.mobileStatus == 'SUSPECTED_POWER_OFF'" type="info">疑似关机</el-tag>
          <el-tag v-else-if="scope.row.mobileStatus == 'BUSY'" type="info">忙</el-tag>
          <el-tag v-else-if="scope.row.mobileStatus == 'UNKNOWN'" type="warning">未知</el-tag>
          <el-tag v-else-if="scope.row.mobileStatus == 'NOT_EXIST'" type="danger">空号</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="mobileStatusRunTime" label="电话状态更新时间" header-align="center" align="center" width="120"  show-overflow-tooltip></el-table-column>
      <el-table-column prop="position" label="职位" header-align="center" align="center" width="120"></el-table-column>
      <el-table-column prop="email" label="邮箱" header-align="center" align="center" min-width="120"></el-table-column>
      <el-table-column prop="demands" label="采购意向" header-align="center" align="center" min-width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="regLocation" label="地址" header-align="center" align="center" min-width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="processState" label="处理状态" header-align="center" align="center" width="130">
        <template v-slot="scope">
          <el-tag v-if="scope.row.processState !== 1" type="danger">未处理</el-tag>
          <el-tag v-else type="success">已处理</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="connected" label="沟通结果" header-align="center" align="center" width="120">
        <template v-slot="scope">
          <el-tag v-if="scope.row.connected == 0" type="danger">未接通</el-tag>
          <el-tag v-else-if="scope.row.connected == 1" type="success">已接通</el-tag>
          <el-tag v-else-if="scope.row.connected == 2" type="warning">无效</el-tag>
          <el-tag v-else>-</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="沟通备注" header-align="center" align="center" width="200" show-overflow-tooltip></el-table-column>
      <el-table-column prop="belongerName" label="归属人" header-align="center" align="center" width="130"></el-table-column>
      <el-table-column prop="updaterName" label="操作人" header-align="center" align="center" width="130"></el-table-column>
      <el-table-column prop="updateTime" label="操作时间" header-align="center" align="center" width="150">
        <template v-slot="scope">
          {{ scope.row.updaterName !== null ? scope.row.updateTime : '' }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
        <template v-slot="scope">
          <el-button type="primary" link @click="updateHandle(scope.row.id)">{{ $t("update") }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <data-handle-update ref="updateHandleRef" @refreshDataList="state.refreshDataList()"></data-handle-update>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import {reactive, ref, toRefs, watch} from "vue";
import DataHandleUpdate from "./data-handle-update.vue";

const view = reactive({
  getDataListURL: "/noc/companyemployee/queryUnProcessPage",
  getDataListIsPage: true,
  limit: 20,
  daterange: null,
  dataForm: {
    cid: "",
    ccompanyName: "",
    cmobile: "",
    cprocessState: "",
    cconnected: "",
    cbelongerName: "",
    cuserName: "",
    cisDemand: "",
    cdemand: "",
    cmobileStatus: "",
    startDate: null as number | null,
    endDate: null as number | null
  }

});

const state = reactive({ ...useView(view), ...toRefs(view) });
watch(
    () => state.daterange,
    (val: number[] | null) => {
      if (val === null) {
        state.dataForm.startDate = null;
        state.dataForm.endDate = null;
      } else {
        state.dataForm.startDate = val[0];
        state.dataForm.endDate = val[1];
      }
    }
);
const updateHandleRef = ref();
const updateHandle = (id?: number) => {
  updateHandleRef.value.init(id, {
    cid: state.dataForm.cid,
    ccompanyName: state.dataForm.ccompanyName,
    cmobile: state.dataForm.cmobile,
    cprocessState: state.dataForm.cprocessState,
    cbelongerName: state.dataForm.cbelongerName,
    cuserName: state.dataForm.cuserName,
    cisDemand: state.dataForm.cisDemand,
    cconnected: state.dataForm.cconnected,
    cdemand: state.dataForm.cdemand,
    cmobileStatus: state.dataForm.cmobileStatus,
    startDate: state.dataForm.startDate,
    endDate: state.dataForm.endDate
  });
};
const resetQuery = () => {
  // 1. 清空筛选条件
  state.dataForm.cid        = "";
  state.dataForm.cid        = "";
  state.dataForm.ccompanyName   = "";
  state.dataForm.cmobile    = "";
  state.dataForm.cprocessState    = "";
  state.dataForm.cbelongerName  = "";
  state.dataForm.cuserName  = "";
  state.dataForm.cisDemand  = "";
  state.dataForm.cconnected  = "";
  state.dataForm.cdemand = "";
  state.dataForm.cmobileStatus = "";
  state.daterange = null;
  state.dataForm.startDate = null as number | null;
  state.dataForm.endDate = null as number | null;

  // 2. 重新查询（一般会回到第一页）
  state.page = 1;
  state.getDataList();
};

</script>
